<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span a="a" b="b" v-html="a.b.msg"></span>
        <br>
        {{a.b.msg}}
    </div>
</body>
<script src="./MVVM/mvvm.js"></script>
<script src="./MVVM/observer.js"></script>
<script src="./MVVM/watcher.js"></script>
<script src="./MVVM/compile.js"></script>
<script>
    var vm  = new MVVM({
        el:"#app",
        data:{
            a:{ //dep.id:0
                b:{//dep.id:1
                    msg:"hello msg",//dep.id:2
                }
            }
        }
    })



    //在data中注册过的每一个属性都有一个dep与之对应
    //在vue解析模板时 每一个指令都会分配到一个watcher
    //dep & watcher的多对多关系
    setTimeout(()=>{
        vm.a.b.msg = "xxx"
    },2000)
</script>
</html>